<!doctype html>
<head>
  <link rel=stylesheet href="../../node_modules/codemirror/lib/codemirror.css">
  <link rel="stylesheet" href="../../node_modules/codemirror/addon/hint/show-hint.css">
  <link rel="stylesheet" href="../../node_modules/codemirror/addon/dialog/dialog.css">
  <link rel="stylesheet" href="../../node_modules/codemirror/addon/tern/tern.css">
  <meta charset="utf-8">
  <link rel=stylesheet href="../docs.css">
  <link rel=stylesheet href="demo.css">
  <title>Tern Demo</title>
</head>
<body>
  <!-- load all the junk required for the demo -->
  <script src="../../node_modules/codemirror/lib/codemirror.js"></script>
  <script src="../../node_modules/codemirror/mode/javascript/javascript.js"></script>
  <script src="../../node_modules/codemirror/addon/hint/show-hint.js"></script>
  <script src="../../node_modules/codemirror/addon/dialog/dialog.js"></script>
  <script src="../../node_modules/codemirror/addon/tern/tern.js"></script>
  <script src="polyfill.js"></script>
  <script src="../../node_modules/codemirror/addon/search/searchcursor.js"></script>
  <script src="../../node_modules/codemirror/addon/search/search.js"></script>
  <script src="../../node_modules/codemirror/addon/edit/matchbrackets.js"></script>
  <script src="../../node_modules/acorn/dist/acorn.js"></script>
  <script src="../../node_modules/acorn-loose/dist/acorn-loose.js"></script>
  <script src="../../node_modules/acorn-walk/dist/walk.js"></script>
  <script src="../../lib/signal.js"></script>
  <script src="../../lib/tern.js"></script>
  <script src="../../lib/def.js"></script>
  <script src="../../lib/comment.js"></script>
  <script src="../../lib/infer.js"></script>
  <script src="demo.js"></script>
  <script src="../../plugin/modules.js"></script>
  <script src="../../plugin/es_modules.js"></script>
  <script src="../../plugin/requirejs.js"></script>
  <script src="../../plugin/doc_comment.js"></script>
  <script src="../../plugin/complete_strings.js"></script>

<div id=top>
  <div id=head>
    <a href="http://ternjs.net" class=title>Tern: <span class=subtitle>Intelligent JavaScript tooling</span>
    </a><a href="index.html">Demo
    </a><a href="../manual.html">Docs
    </a><a href="https://github.com/ternjs/tern">Code</a>
  </div>
</div>

<h1>Tern demo</h1>

<p>This editor is hooked up to Tern. The drop-down in the top right
corner lists the commands and keyboard shortcuts available. Output and
function argument hints will appear in the bar below the editor.</p>

<div style="position: relative" id="demospace">
  <div id=menus>
    <select id="commands">
      <option>commands...</option>
      <option value=complete>Autocomplete (ctrl-space)</option>
      <option value=jumptodef>Jump to definition (alt-.)</option>
      <option value=finddocs>Describe (ctrl-o)</option>
      <option value=findtype>Find type of (ctrl-i)</option>
      <option value=rename>Rename variable (ctrl-q)</option>
      <option value=addfile>Add a new file</option>
      <option value=delfile>Remove this file</option>
    </select>
    <select id="projects">
      <option>demos...</option>
    </select>
  </div>
  <form id="place"></form>
</div>

<div style="display: none" id="projects">
<project id="simple"
         data-plugins="doc_comments complete_strings"
         data-libs="ecmascript browser">
<pre id="test">
// Use ctrl-space to complete something
co
document.body.a

// Put the cursor in or after an expression, press ctrl-i to
// find its type

var foo = ["array", "of", "strings"]
var bar = foo.slice(0, 2).join("").split("a")[0]

// Works for locally defined types too.

function CTor() { this.size = 10 }
CTor.prototype.hallo = "hallo"

var baz = new CTor
baz.

// You can press ctrl-q when the cursor is on a variable
// name to rename it. Try it with CTor...

// When the cursor is in an argument list, the arguments
// are shown below the editor.

[1].reduce(  )
</pre>
</project>

<project id="requirejs"
         data-plugins="requirejs doc_comments complete_strings"
         data-libs="ecmascript browser jquery">
<pre id="main.js">
// A simple set of three modules, connected with requirejs

requirejs(["text_util", "output"], function(text, output) {
  window.addEventListener("load", function() {
    // Pressing alt-. on `garble` jumps to the module
    var word = text.capitalize(text.garble(prompt("Hi", "")))
    output.write(word)
  })
})
</pre>

<pre id="text_util.js">
// Trivial requirejs-style module

define(function() {
  return {
    // Capitalize a string
    capitalize: function(word) {
      return word.charAt(0).toUpperCase() + word.slice(1)
    },

    // Garble the vowels in a string
    garble: function(word) {
      return word.replace(/[auiyoe]/g, function() {
        return "auiyoe".charAt(Math.floor(Math.random() * 6))
      })
    }
  }
})
</pre>

<pre id="output.js">
// This one is written using a multi-module-loader wrapper
//
// If Tern's requirejs plugin is loaded, it'll pick up the
// call to define. Alternatively, when its commonjs plugin
// is loaded, that'll handle the require calls.

(function(root, mod) {
  if (typeof exports == "object" && typeof module == "object")
    mod(exports, require("jquery")) // CommonJS
  else if (typeof define == "function" && define.amd)
    define(["exports", "jquery"], mod) // AMD
  else
    mod(root.output = {}, root.$) // Plain browser env
})(this, function(exports, $) {

  // Write some text to the bottom of the document
  exports.write = function(text) {
    $("body").append($("<pre></pre>").text(text))
  }

})
</project>

<project id="ES6"
         data-plugins="es_modules doc_comments complete_strings"
         data-libs="ecmascript">
<pre id="index.js">
// Tern can do ECMAScript 6 (2015) too!

// Imports and exports work. You can complete module names, and
// jump to the definition of things defined in modules.

// (Press alt-. on `List` to jump to the class definition)
import {List} from "./list"

import * as myMath from "./mymath"

const l = List.of(3, 4, 5)
for (let elt of l.map(x => x * 2)) {
  // Tern knows that `elt` is a number!
  let output = myMath.halve(elt)
  console.log(output)
}

// Raw template string
let raw = String.raw`\n`

// Default arguments
Array.of(1, 2, 3, 4).find(x => x % 3 == 0)
</pre>

<pre id="list.js">
export class List {
  constructor(head, tail) {
    this.head = head
    this.tail = tail
  }

  static of(...elements) {
    let result = null
    for (let i = elements.length - 1; i >= 0; i--)
      result = new List(elements[i], result)
    return result
  }

  map(f) {
    return new List(f(this.head), this.tail && this.tail.map(f))
  }

  *[Symbol.iterator]() {
    for (let pos = this; pos; pos = pos.tail)
      yield pos.head
  }
}
</pre>

<pre id="mymath">
export const PI = 3

export const halve = x => x / 2
</pre>

</project>

</div>

</body>
